<template>
  <a-card :bordered="false" size="small">
    <lz-search ref="searchBar" v-if="items.length>0" :column="3" :items="items" @search="search"></lz-search>
    <lz-table ref="myTable">
      <div slot="tools">
        <a-button style="margin-right: 10px;" v-for="(item,i) in tools" :key="i" :icon="item.icon || ''"  :type="item.type">{{item.label}}</a-button>
        <!-- <a-button icon="delete" @click="dels" style="margin-left: 10px;" type="danger">
          批量删除
        </a-button> -->
      </div>
    </lz-table>
    <edit ref="edit" @search="search"></edit>
  </a-card>
</template>
<script>
export default {
  props: {
    searchItems: {
      type: Array,
      default: function() {
        return []
      }
    },
    toolsArray: {
      type: Array,
      default: function() {
        return []
      }
    },
    tableOptions: {
      type: Object,
      default: function() {
        return {
          url: '',
          method: 'get',
          queryParams: {},
          showColumns: true,
          showRefresh: true,
          changeSize: true,
          showCheckBox: false,
          showIndex: true,
          columns: [],
          operate: {}
        }
      }
    }
  },
  watch: {
    searchItems(v) {
      this.items = v
    },
    tableOptions: {
      handler() {
        console.log(this.tableOptions)
        this.$refs.myTable.init(this.tableOptions)
      },
      deep: true
    },
    toolsArray(v) {
      this.tools = v
    }
  },
  data() {
    return {
      items: this.searchItems,
      tools: this.toolsArray
    }
  },
  created() {},
  mounted() {
  },
  methods: {
    search() {

    }
  }
}
</script>
<style></style>
